<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="orderSearch">
      <el-form ref="form" label-width="80px" inline>
        <el-form-item prop="order_id">
          <el-input v-model="searchVal" placeholder="请输入退费单号" clearable />
        </el-form-item>
        <el-button type="primary" @click="queryTuifeiData()">查询</el-button>
        <el-button type="info" @click="resetFrom">重置</el-button>
      </el-form>
    </div>
    <!-- 金额显示区域 -->
    <div class="moneyShow">
      <div class="moneyShowDIa">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xingzhuanggongnengtubiao-1" /></svg>
          </div>
          <div class="dingdanzongeasda">
            <div style="width: 90px;">退费订单总量:</div>
            <div class="dingdanzongeasdaa">{{ returnOrderList.length }}</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIb">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-tubiaozhizuomoban" /></svg>
          </div>
          <div class="dingdanzongeasda">
            <div>退费受理中:</div>
            <div class="dingdanzongeasdaa">{{ tuifeiShuzu1.length }}</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingdanxiangqing-dingdanzhuangtai" /></svg>
          </div>
          <div class="dingdanzongeasda">
            <div>已处理:</div>
            <div class="dingdanzongeasdaa">{{ tuifeiShuzu2.length }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部导航列表 -->
    <ul class="head-menu">
      <li v-for="(item, index) in menuList" :key="index" class="head-menu-item" :class="menuIndex == index ? 'head-menu-item-active' : ''" @click="menuItemChange(index)">{{ item }}</li>
    </ul>
    <div>
      <div class="tuifeibiaoqianBtn">
        <el-button type="success" size="medium" @click="addOrderDialog = true">新建退费</el-button>
        <el-button size="medium">导出</el-button>
      </div>
      <!-- 退费表格区域 -->
      <el-table ref="multipleTable" border size="mini" fit highlight-current-row :data="tuifeiShuzu" tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column align="center" label="订单ID" prop="order_id" width="140" />
        <el-table-column align="center" label="学生id" prop="student_id" />
        <el-table-column align="center" label="业务状态"prop="return_status">
          <template slot-scope="scope">
            <span v-if="scope.row.return_status === 0" style="color: red;">受理中</span>
            <span v-if="scope.row.return_status === 1">已退费</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="退费方式">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.return_type === 1">现金</el-tag>
            <el-tag v-if="scope.row.return_type === 2" type="primary">刷卡</el-tag>
            <el-tag v-if="scope.row.return_type === 3" type="info">支付宝</el-tag>
            <el-tag v-if="scope.row.return_type === 4" type="warning">微信</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="商品名称" width="100" /> -->
        <!-- <el-table-column align="center" label="订单金额" width="100" /> -->
        <!-- <el-table-column align="center" label="实收金额" width="100" /> -->
        <!-- <el-table-column align="center" label="申请日期" width="100" />
        <el-table-column align="center" label="退费日期" width="100" />
        <el-table-column align="center" label="打印次数" width="100" /> -->
        <el-table-column align="center" label="录入信息" width="120" prop="information" />
        <el-table-column align="center" label="备注" width="120" prop="desc" />
        <el-table-column align="center" label="审批人名字" width="160" prop="teacher_name" />
        <el-table-column align="center" label="主根进人id" prop="teacher_id" />
        <el-table-column align="center" label="机构id" width="100" prop="institution_id" />
        <el-table-column align="center" label="退费金额" width="100" prop="back_fees" />
        <el-table-column align="center" label="查看" width="300">
          <template slot-scope="scope">
            <el-button size="medium" type="primary" icon="el-icon-search" @click="lookTuiFeiDialogVisible = true;getTuifeiRow(scope.row.unid);">查看</el-button>
            <el-button size="medium" type="danger" icon="el-icon-delete" @click="deleteTuifei(scope.row.unid)">作废</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码区域 -->
      <div class="bottomPaginationaa">
        <el-pagination :current-page="page" :page-sizes="[6, 12, 24, 40]" :page-size="limit" layout="sizes, prev, pager, next,total, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 查看退费信息DIALOG   -->
    <el-dialog title="学员订单信息" :visible.sync="lookTuiFeiDialogVisible" width="60%">
      <view-details
        :select-student-list="selectStudentList"
        :query-goods-data="queryGoodsData"
        :return-data="returnData"
      />
    </el-dialog>

    <!-- 新建退费DIALOG -->
    <el-dialog title="退费订单" :visible.sync="addOrderDialog" width="40%" @close="handleClose">
      <el-form ref="moneyOutFormRef" :model="addMonOutForm" :rules="addMonOutFormRules" label-width="100px" class="demo-ruleForm">
        <div class="xjtfallDIV">
          <div>
            <el-form-item label="订单编号" prop="order_id">
              <div class="dingdanxinxiDIV">
                <el-select v-model="addMonOutForm.order_id" placeholder="请输入订单编号" @change="selectOrderId">
                  <el-option v-for="(item, index) in orderList" :key="index" :label="item.order_num" :value="item.unid" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="学生ID" prop="student_id">
              <div class="dingdanxinxiDIV" style="width: 200px"><el-input v-model="addMonOutForm.student_id" disabled /></div>
            </el-form-item>
            <el-form-item label="退费金额" prop="back_fees">
              <div class="dingdanxinxiDIV" style="width: 200px"><el-input v-model="addMonOutForm.back_fees" disabled /></div>
            </el-form-item>

            <el-form-item label="录入信息" prop="information">
              <div style="width: 200px"><el-input v-model="addMonOutForm.information" placeholder="请录入信息" /></div>
            </el-form-item>
          </div>
          <div class="xjtfDIV2">
            <el-form-item label="申请人" prop="teacher_name">
              <div style="width: 200px"><el-input v-model="addMonOutForm.teacher_name" placeholder="默认当前操作人" /></div>
            </el-form-item>
            <el-form-item label="申请人ID" prop="teacher_id">
              <div style="width: 200px"><el-input v-model="addMonOutForm.teacher_id" /></div>
            </el-form-item>

            <el-form-item label="退费方式" prop="return_type">
              <div style="width: 200px">
                <el-select v-model="addMonOutForm.return_type">
                  <el-option label="现金" value="1" />
                  <el-option label="刷卡" value="2" />
                  <el-option label="支付宝" value="3" />
                  <el-option label="微信" value="4" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <div style="width: 200px"><el-input v-model="addMonOutForm.desc" type="textarea" placeholder="文本不得超过500字" /></div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="审核部门" prop="role">
          <template>
            <el-checkbox-group v-model="addMonOutForm.role">
              <el-checkbox v-for="(city, index) in bumenShuzu" :key="index" :label="city.id">{{ city.role_name }}</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrderDialog = false">关闭</el-button>
        <el-button type="primary" @click="addTuiFei()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder, addTuiFeiApi, getBumenApi, getOrderInfoAPI, getTuifeiAPI, deleteTuifeiAPI, getTuifeiRowApi } from '@/api/order'
import { selectStudentById } from '@/api/studentRecruit'
import viewdetails from '../moneyOutList/components/checkDialog'
export default {
    components: {
        'view-details': viewdetails
    },
    data() {
        return {
            menuList: ['全部列表', '受理中', '已作废'],
            menuIndex: 0,
            searchVal: '', // 主页order_id搜索框的值
            selectStudentList: {},
            queryGoodsData: {},
            tuifeiShuzu: [],
            returnOrderList: [],
            tuifeiShuzu1: [],
            tuifeiShuzu2: [],
            page: 1, // 当前页
            limit: 6, // 每页条数
            getTuifeiQueryInfo1: {
                return_status: 0,
                limit: 6,
                page: 1,
                order_id: '',
                is_delete: 0
            },
            getTuifeiQueryInfo2: {
                limit: 6,
                page: 1,
                order_id: '',
                is_delete: 1
            },
            bumenShuzu: {},
            orderList: [],
            returnData: {}, // 退费
            addMonOutForm: {
                order_id: '',
                return_type: null,
                information: '',
                desc: '',
                student_id: '',
                teacher_name: '',
                teacher_id: '',
                back_fees: '',
                role: []
            },
            addOrderDialog: false,
            lookTuiFeiDialogVisible: false,
            currentPage: 1, // 页数
            total: null, // 总数
            addMonOutFormRules: {
                order_id: [{ required: true, message: '不能为空', trigger: 'blur' }],
                student_id: [{ required: true, message: '不能为空', trigger: 'blur' }],
                back_fees: [{ required: true, message: '不能为空', trigger: 'blur' }],
                information: [{ required: true, message: '不能为空', trigger: 'blur' }],
                desc: [{ required: true, message: '不能为空', trigger: 'blur' }],
                teacher_name: [{ required: true, message: '不能为空', trigger: 'blur' }],
                teacher_id: [{ required: true, message: '不能为空', trigger: 'blur' }],
                return_type: [{ required: true, message: '不能为空', trigger: 'blur' }],
                role: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        }
    },
    watch: {
        total(val) {
            this.returnOrderList.length = val
        }
    },
    created() {
        this.getOrder()
        this.getBumen()
        this.getTuifei()
        this.getTuifei1()
        this.getTuifei2()
        this.getReturnOrder()
    },
    methods: {
        // 同步更新
        selectOrderId() {
            const item = this.orderList.find(item1 => item1.unid === this.addMonOutForm.order_id)
            this.addMonOutForm.student_id = item.student_id
            this.addMonOutForm.back_fees = item.total_price
        },
        // 关闭对话框
        handleClose() {
            this.$refs['moneyOutFormRef'].resetFields()
        },
        // 顶部导航栏
        async menuItemChange(index) {
            this.menuIndex = index
            let resData = {
                page: 1,
                limit: 6
            }
            this.page = resData.page
            // 退费状态 0受理中 1已完成 || 是否已作废 1作废 0正常
            switch (index) {
                case 0:
                    this.getTuifei()
                    break
                // 受理中
                case 1:
                    resData.return_status = 0
                    resData.is_delete = 0
                    break
                // 已完成
                case 2:
                    resData.is_delete = 1
                    break
                default:
                    break
            }
            let data = await getTuifeiAPI(resData)
            if (data.code == 200) {
                // 条数
                this.total = data.data.total
                // 页数
                this.currentPage = data.data.total_page
                this.tuifeiShuzu = data.data.list
            }
        },
        // 表格复选框选择
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 重置表单
        resetFrom() {
            // this.$refs.form.resetFields()
            this.searchVal = ''
        },
        // 获取当前行退费信息
        async getTuifeiRow(unid) {
            // 退款信息
            let qqq = {
                unid: unid
            }
            let rs = await getTuifeiRowApi(qqq)
            this.returnData = rs.data
            console.log(this.returnData)
            // 购买商品记录，学员缴费记录
            let queryCourse = {
                unid: rs.data.order_id
            }
            getOrderInfoAPI(queryCourse).then(re => {
                this.queryGoodsData = re.data
                this.queryGoodsData.pay_type = re.data.pay_fee.pay_type
                this.queryGoodsData.teacher_name = re.data.pay_fee.teacher_name
                this.queryGoodsData.pay_num = re.data.pay_fee.pay_num
            })
            // 学员基本信息
            let queryStudent = {
                unid: rs.data.student_id
            }
            selectStudentById(queryStudent).then(res => {
                this.selectStudentList = res.data
                this.selectStudentList.phone = res.data.home[0].phone
            })
        },
        // 分页查询
        handleSizeChange(val) {
            this.limit = val
            this.getTuifei()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getTuifei()
        },
        // 作废退款订单
        async deleteTuifei(unid) {
            this.$confirm('此操作将删除该课程，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async() => {
                    let qqq = {
                        unid: unid
                    }
                    var rs = await deleteTuifeiAPI(qqq)
                    if (rs.code !== 200) return
                    else {
                        this.$message.success('删除退费订单成功')
                        this.getTuifei()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        queryTuifeiData() {
            this.page = 1
            this.limit = 6
            this.getTuifei()
        },
        // 分页查询全部退费
        async getTuifei() {
            let getTuifeiQueryInfo = {
                limit: this.limit,
                page: this.page,
                return_status: 0,
                is_delete: 0
            }
            if (this.searchVal) {
                getTuifeiQueryInfo.order_id = this.searchVal
            }
            switch (this.menuIndex) {
                // 受理中
                case 1:
                    getTuifeiQueryInfo.return_status = 0
                    getTuifeiQueryInfo.is_delete = 0
                    break
                // 已完成
                case 2:
                    getTuifeiQueryInfo.is_delete = 1
                    break
                default:
                    break
            }
            let rs = await getTuifeiAPI(getTuifeiQueryInfo)
            if (rs.code == 200) {
                this.tuifeiShuzu = rs.data.list
                this.total = rs.data.total
                this.currentPage = rs.data.current_page
            }
        },
        // 分页查询未作废退费
        async getTuifei1() {
            var rs = await getTuifeiAPI(this.getTuifeiQueryInfo1)
            this.tuifeiShuzu1 = rs.data.list
            this.total1 = rs.data.total
            this.currentPage1 = rs.data.current_page
        },
        // 分页查询作废列表
        async getTuifei2() {
            var rs = await getTuifeiAPI(this.getTuifeiQueryInfo2)
            this.tuifeiShuzu2 = rs.data.list
            this.total2 = rs.data.total
            this.currentPage2 = rs.data.current_page
        },
        // 获取部门ID
        async getBumen() {
            let aaa = {}
            var rs = await getBumenApi(aaa)
            this.bumenShuzu = rs.data
        },
        // 提交表单
        addTuiFei() {
            this.$refs.moneyOutFormRef.validate(async valid => {
                if (!valid) return
                else {
                    var resData = await addTuiFeiApi(this.addMonOutForm)
                    if (resData.code !== 200) return
                    else {
                        this.$message.success('新建退费成功')
                        this.addOrderDialog = false
                        this.getTuifei()
                    }
                }
            })
        },
        // 获取订单列表
        async getOrder() {
            let query = {}
            var resData = await getOrder(query)
            if (resData.code !== 200) return
            else {
                this.orderList = resData.data.list
            }
        },
        // 获取订单列表
        async getReturnOrder() {
            let query = {}
            var resData = await getTuifeiAPI(query)
            if (resData.code !== 200) return
            else {
                this.returnOrderList = resData.data.list
            }
        }
    }
}
</script>

<style scoped lang="scss">
.xjtfallDIV {
  display: flex;
  .xjtfDIV2 {
    margin-left: 30px;
  }
}
.icon {
  font-size: 60px;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-table--mini {
  font-size: 14px;
}

.moneyShow {
  display: flex;

  .moneyShowDIa {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    height: 100.44px;
    width: 217px;
  }
  .moneyShowDIb {
    border-radius: 8px;
    margin-left: 30px;
    border: 1px solid #dcdfe6;
  }

  .moneyShowDIv1 {
    border-radius: 8px;
    margin-left: 30px;
    padding-right: 30px;
    border: 1px solid #dcdfe6;
  }
  .moneyShowDIv1INY {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 30px 15px 25px;
    .dingdanzongeasda {
      margin-left: 16px;
    }
    .dingdanzongeasdaa {
      margin: 6px 0 0 6px;
      font-size: 18px;
    }
  }
}
.tuifeibiaoqianBtn {
  margin-bottom: 15px;
  margin-top: 15px;
}
.bottomPaginationaa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.head-menu{
  padding-left: 0px;
  margin: 20px 0px 0px 0px;
  display: flex;
  list-style: none;
  font-size: 16px;
  .head-menu-item{
    margin-right: 30px;
    cursor: pointer;
  }
  .head-menu-item-active{
    border-bottom: 2px solid #42B983;
    color: #42B983;
  }
}

</style>
